import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtCharts 2.3

Item {
    id: mainPage
    
    property var deviceCtrl
    property var samplingMgr
    property var dataVis
    property var qmlBridge
    
    Rectangle {
        anchors.fill: parent
        color: "#f5f5f5"
        
        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 20
            spacing: 20
            
            // Header
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 80
                color: "#2196F3"
                radius: 8
                
                RowLayout {
                    anchors.fill: parent
                    anchors.margins: 20
                    
                    Text {
                        text: "Bacteria Sampler System"
                        font.pixelSize: 24
                        font.bold: true
                        color: "white"
                    }
                    
                    Item { Layout.fillWidth: true }
                    
                    Text {
                        id: timeDisplay
                        text: Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss")
                        font.pixelSize: 14
                        color: "white"
                        
                        Timer {
                            interval: 1000
                            running: true
                            repeat: true
                            onTriggered: timeDisplay.text = Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss")
                        }
                    }
                }
            }
            
            // Status Panel
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 120
                color: "white"
                radius: 8
                border.color: "#e0e0e0"
                border.width: 1
                
                RowLayout {
                    anchors.fill: parent
                    anchors.margins: 20
                    spacing: 30
                    
                    // Device Status
                    Column {
                        spacing: 8
                        
                        Text {
                            text: "Device Status"
                            font.pixelSize: 16
                            font.bold: true
                            color: "#333"
                        }
                        
                        Rectangle {
                            width: 120
                            height: 40
                            color: getDeviceStatusColor()
                            radius: 20
                            
                            function getDeviceStatusColor() {
                                if (deviceCtrl) {
                                    switch(deviceCtrl.deviceStatus) {
                                        case 0: return "#4CAF50" // IDLE - Green
                                        case 1: return "#FF9800" // SAMPLING - Orange
                                        case 2: return "#F44336" // ERROR - Red
                                        default: return "#9E9E9E" // UNKNOWN - Gray
                                    }
                                }
                                return "#9E9E9E"
                            }
                            
                            Text {
                                anchors.centerIn: parent
                                text: getDeviceStatusText()
                                color: "white"
                                font.bold: true
                                
                                function getDeviceStatusText() {
                                    if (deviceCtrl) {
                                        switch(deviceCtrl.deviceStatus) {
                                            case 0: return "IDLE"
                                            case 1: return "SAMPLING"
                                            case 2: return "ERROR"
                                            default: return "UNKNOWN"
                                        }
                                    }
                                    return "UNKNOWN"
                                }
                            }
                        }
                    }
                    
                    // Flow Rate
                    Column {
                        spacing: 8
                        
                        Text {
                            text: "Flow Rate"
                            font.pixelSize: 16
                            font.bold: true
                            color: "#333"
                        }
                        
                        Text {
                            text: (deviceCtrl ? deviceCtrl.flowRate.toFixed(1) : "0.0") + " L/min"
                            font.pixelSize: 18
                            color: "#2196F3"
                        }
                    }
                    
                    // Temperature
                    Column {
                        spacing: 8
                        
                        Text {
                            text: "Temperature"
                            font.pixelSize: 16
                            font.bold: true
                            color: "#333"
                        }
                        
                        Text {
                            text: (deviceCtrl ? deviceCtrl.temperature.toFixed(1) : "0.0") + " °C"
                            font.pixelSize: 18
                            color: "#FF5722"
                        }
                    }
                    
                    // Humidity
                    Column {
                        spacing: 8
                        
                        Text {
                            text: "Humidity"
                            font.pixelSize: 16
                            font.bold: true
                            color: "#333"
                        }
                        
                        Text {
                            text: (deviceCtrl ? deviceCtrl.humidity.toFixed(1) : "0.0") + " %"
                            font.pixelSize: 18
                            color: "#009688"
                        }
                    }
                    
                    // Battery Level
                    Column {
                        spacing: 8
                        
                        Text {
                            text: "Battery"
                            font.pixelSize: 16
                            font.bold: true
                            color: "#333"
                        }
                        
                        Text {
                            text: (deviceCtrl ? deviceCtrl.batteryLevel.toFixed(0) : "0") + " %"
                            font.pixelSize: 18
                            color: deviceCtrl && deviceCtrl.batteryLevel < 20 ? "#F44336" : "#4CAF50"
                        }
                    }
                    
                    Item { Layout.fillWidth: true }
                }
            }
            
            // Main Content Area
            RowLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                spacing: 20
                
                // Left Panel - Controls
                Rectangle {
                    Layout.preferredWidth: 350
                    Layout.fillHeight: true
                    color: "white"
                    radius: 8
                    border.color: "#e0e0e0"
                    border.width: 1
                    
                    ColumnLayout {
                        anchors.fill: parent
                        anchors.margins: 20
                        spacing: 15
                        
                        Text {
                            text: "Sampling Control"
                            font.pixelSize: 18
                            font.bold: true
                            color: "#333"
                        }
                        
                        // Quick Start Buttons
                        Button {
                            Layout.fillWidth: true
                            text: "Start 5min Sampling"
                            enabled: deviceCtrl ? deviceCtrl.deviceStatus === 0 : false
                            onClicked: {
                                if (deviceCtrl) {
                                    deviceCtrl.startSampling(0, 300) // TIMED, 5 minutes
                                }
                            }
                        }
                        
                        Button {
                            Layout.fillWidth: true
                            text: "Start 10L Sampling"
                            enabled: deviceCtrl ? deviceCtrl.deviceStatus === 0 : false
                            onClicked: {
                                if (deviceCtrl) {
                                    deviceCtrl.startSampling(1, 10) // VOLUME, 10L
                                }
                            }
                        }
                        
                        Button {
                            Layout.fillWidth: true
                            text: "Stop Sampling"
                            enabled: deviceCtrl ? deviceCtrl.deviceStatus === 1 : false
                            onClicked: {
                                if (deviceCtrl) {
                                    deviceCtrl.stopSampling()
                                }
                            }
                        }
                        
                        Rectangle {
                            Layout.fillWidth: true
                            height: 1
                            color: "#e0e0e0"
                        }
                        
                        // Custom Sampling
                        Text {
                            text: "Custom Sampling"
                            font.pixelSize: 16
                            font.bold: true
                            color: "#333"
                        }
                        
                        RowLayout {
                            Layout.fillWidth: true
                            
                            RadioButton {
                                id: timedRadio
                                text: "Timed"
                                checked: true
                            }
                            
                            RadioButton {
                                id: volumeRadio
                                text: "Volume"
                            }
                        }
                        
                        RowLayout {
                            Layout.fillWidth: true
                            
                            SpinBox {
                                id: customValue
                                from: 1
                                to: timedRadio.checked ? 3600 : 100
                                value: timedRadio.checked ? 300 : 10
                            }
                            
                            Text {
                                text: timedRadio.checked ? " sec" : " L"
                                font.pixelSize: 12
                                color: "#666"
                                verticalAlignment: Text.AlignVCenter
                            }
                            
                            Button {
                                text: "Start"
                                enabled: deviceCtrl ? deviceCtrl.deviceStatus === 0 : false
                                onClicked: {
                                    if (deviceCtrl) {
                                        var type = timedRadio.checked ? 0 : 1
                                        deviceCtrl.startSampling(type, customValue.value)
                                    }
                                }
                            }
                        }
                        
                        Rectangle {
                            Layout.fillWidth: true
                            height: 1
                            color: "#e0e0e0"
                        }
                        
                        Text {
                            text: "Task Management"
                            font.pixelSize: 16
                            font.bold: true
                            color: "#333"
                        }
                        
                        Text {
                            text: "Pending Tasks: " + (samplingMgr ? samplingMgr.pendingTasksCount : 0)
                            font.pixelSize: 14
                            color: "#666"
                        }
                        
                        Text {
                            text: "Completed Tasks: " + (samplingMgr ? samplingMgr.completedTasksCount : 0)
                            font.pixelSize: 14
                            color: "#666"
                        }
                        
                        Item { Layout.fillHeight: true }
                    }
                }
                
                // Right Panel - Charts
                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "white"
                    radius: 8
                    border.color: "#e0e0e0"
                    border.width: 1
                    
                    ColumnLayout {
                        anchors.fill: parent
                        anchors.margins: 20
                        spacing: 15
                        
                        Text {
                            text: "Real-time Monitoring"
                            font.pixelSize: 18
                            font.bold: true
                            color: "#333"
                        }
                        
                        // Flow Rate Chart
                        ChartView {
                            id: flowRateChart
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            title: "Flow Rate (L/min)"
                            antialiasing: true
                            backgroundColor: "transparent"
                            
                            LineSeries {
                                id: flowRateSeries
                                name: "Flow Rate"
                                color: "#2196F3"
                                width: 2
                                
                                axisX: ValueAxis {
                                    id: flowRateAxisX
                                    min: 0
                                    max: 60
                                    tickCount: 7
                                    labelFormat: "%d"
                                    titleText: "Time (seconds)"
                                }
                                
                                axisY: ValueAxis {
                                    id: flowRateAxisY
                                    min: 0
                                    max: 20
                                    tickCount: 5
                                    labelFormat: "%.1f"
                                    titleText: "Flow Rate (L/min)"
                                }
                            }
                            
                            Component.onCompleted: {
                                // Initialize with some sample data
                                for (var i = 0; i < 60; i++) {
                                    flowRateSeries.append(i, 0)
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    // Timer for updating charts
    Timer {
        id: chartUpdateTimer
        interval: 1000
        running: true
        repeat: true
        onTriggered: {
            if (deviceCtrl && flowRateSeries.count > 0) {
                // Shift data points left
                for (var i = 0; i < flowRateSeries.count - 1; i++) {
                    flowRateSeries.replace(i, i, flowRateSeries.at(i + 1).y)
                }
                // Add new data point
                flowRateSeries.replace(flowRateSeries.count - 1, flowRateSeries.count - 1, deviceCtrl.flowRate)
            }
        }
    }
}